<template>
  <div class="dashboard-container">
    <el-card class="dashboard-card">
      <template #header>
        <div class="card-header">
          <span>控制台</span>
        </div>
      </template>
      <div class="dashboard-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card shadow="hover" class="data-card">
              <h3>访问量</h3>
              <div class="num">102,400</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="data-card">
              <h3>用户数</h3>
              <div class="num">81,212</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="data-card">
              <h3>订单数</h3>
              <div class="num">9,280</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="data-card">
              <h3>销售额</h3>
              <div class="num">￥9,280</div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// TODO: 添加控制台内容
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  
  .dashboard-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .dashboard-content {
      .data-card {
        text-align: center;
        
        h3 {
          font-size: 16px;
          color: #909399;
          margin-bottom: 15px;
        }
        
        .num {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }
}
</style> 